<template>
  <view class="wish-add-list" v-if="showPage">
    <view class="list-container" v-for="(item,index) in wishList" :key="index">
      <view class="list_box">
        <image :src="item.majorUrl" @click="skipPdp(item)"></image>
        <view class="list-right">
          <view @click="skipPdp(item)">
            <view class="name">{{item.itemName}}</view>
            <view class="frontName">{{item.valueName}}</view>
            <view class="price"><text class="mark">¥</text>{{filterChecked.moneyFormat(item.price, 2)}}</view>
          </view>
          <view class="share-icon share" @click='shareTrack(item)'>
            <image class="share" src='https://100000063-1252208446.file.myqcloud.com/images/wishShare.png'
              mode="widthFix"></image>
            <button class="share-button" open-type="share" :data-itemId="item.itemId" :data-valueId='item.valueId'
              :data-shareImageUrl='item.shareImgUrl' :data-majorUrl='item.majorUrl'
              :data-pageTitle='item.itemName'></button>
          </view>
          <view class="share-icon add" @click='addFav(item)'>
            <image class="love" src="https://100000063-1252208446.file.myqcloud.com/images/wishLove.png"></image>
          </view>
        </view>
        <view class="space"></view>
      </view>
    </view>
    <view class="empty" v-if="wishList.length<1">
      <view class="empty-text">感谢您对 MACALLAN 的喜爱 </view>
      <view class="empty-text">您已添加全部商品至心愿单</view>
    </view>
    <iconMove :iconSrc='iconSrc' @iconClick="addTrack"></iconMove>
    <FavDialog ref='favRef' from='list' @changeComponent='changeComponent'></FavDialog>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
  </view>

</template>
<script module="filterChecked" lang="wxs" src="@/utils/filter.wxs"></script>
<script>
  import api from '@/api/api';
  import {
    CUSTOMER_INFO,
    MERCHANT_INFO
  } from '@/utils/constant';
  import iconMove from './iconMove.vue';
  import {
    setFav
  } from '@/utils/commonActItems.js'
  import FavDialog from '@/components/common/favDialog.vue';
  export default {
    data() {
      return {
        wishList: [],
        showPage: false,
        iconSrc: "https://100000063-1252208446.file.myqcloud.com/images/favList.png",
        categoryId: api.environment == 'trial' ? '8043' : '18736'
      }
    },
    components: {
      FavDialog,
      iconMove
    },
    methods: {
			/**
			 * 展示弱提示
			 * @param {Object} msg 文案
			 */
			handleShowTextToast(msg){
				try{
					this.$refs.toastPopup.showToast(msg);
				}catch(e){}
			},
			/**
			 * 若提示按钮点击回调
			 * @param {Object} data.type 类型：confirm确定，cancel取消
			 * @param {Object} data.callBackData 呼气弹窗时传入的数据
			 */
			onToastPopupClick(data){},
      shareTrack(item) {
        this.commitTack(item, {}, 'c_ebmp_wish_list_share_wish_list_product')
      },
      open() {
        this.showPage = true
        this.getAddWishList()
      },
      getAddWishList(from) {
        return new Promise(async (resolve) => {
          const favList = await this.getFavList()
          this.$commonFunction.doSearchGoods(this.categoryId, '', '1', '200').then(res => {
            let wishList = res.data.content
            for (let i = 0; i < favList.length; i++) {
              wishList = wishList.filter((item) => {
                return item.outerItemId != favList[i].referenceId
              })
            }
            this.wishList = wishList
            if (from !== 'parent') {
              this.$parent.handleLoading(false)
            }
            resolve(this.wishList)
          })
        })
      },
      async getFavList() {
        let result;
        try {
          let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
          let merchantInfo = uni.getStorageSync(MERCHANT_INFO);
          const query = {
            store_id: merchantInfo.cloudMerchantStoreId,
            type: 0, // 0心愿单 1意向登记
            page_no: 1,
            page_size: 200
          };
          const res = await api.getWishList({
            method: "GET",
            header: {
              jwt: customerInfo.jwt,
            },
            query
          })
          if (res.code == 1000) {
            result = res.data.content
          }
        } catch (err) {

        }
        return result
      },
      async addFav(item) {
        let res = await setFav(item, 'add', item.valueId, 0)
        const {
          status,
          times
        } = res
        if (status) {
          this.commitTack(item, {
            c_link_pagename: '添加心愿单'
          }, 'c_ebmp_wish_list_add_to_wish_list')
          if (times == 1) {
            this.getAddWishList()
            this.$refs.favRef.open(item)
          } else {
            this.handleShowTextToast('已添加至我的心愿单')
            this.getAddWishList()
          }
        }
      },
      commitTack(item, diffParams, event) {
        let params = {
          c_product_name: item.itemName,
          c_product_brand: 'THE MACALLAN',
          c_product_price: item.price,
          c_product_volume: item.valueName,
          c_product_id: item.itemId,
          c_purchase_type: '',
        }
        let trackParams = Object.assign({}, params, diffParams)
        getApp().commonClTrack(event, trackParams)
      },
      addTrack() {
        getApp().commonClTrack('c_ebmp_wish_list_click_my_wish_list', {
          c_pagename: '添加心愿单',
          c_link_pagename: '我的心愿单',
          c_link_path: 'pages/customer/wishList'
        })
        this.changeComponent()
      },
      skipPdp(item) {
        uni.navigateTo({
          url: `/pages/item/item?id=${item.itemId}&valueId=${item.valueId}`
        })
        setTimeout(() => {
          this.$parent.handleLoading(true)
        }, 200);
      },
      changeComponent() {
        this.$emit('change', 'display')
        this.showPage = false
      }
    }
  }
</script>

<style lang="scss">
  .wish-add-list {
    .icon {
      width: 108rpx;
      height: 108rpx;
      position: fixed;
      bottom: 284rpx;
      right: 20rpx;
      z-index: 10;
    }

    .empty {
      padding-top: 252rpx;

      .empty-text {
        color: #1A1A1A;
        font-size: 28rpx;
        line-height: 44rpx;
        text-align: center;
      }
    }


    .list-container {
      overflow: hidden;
      position: relative;

      .list_box {
        position: relative;
        padding: 30rpx 0 40rpx;
        display: flex;

        image {
          width: 200rpx;
          height: 200rpx;
          margin-left: 15rpx;
        }

        .list-right {
          margin-left: 40rpx;

          .name {
            color: #1A1A1A;
            width: 400rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            font-size: 28rpx;
            line-height: 44rpx;
            overflow: hidden;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            white-space: normal;
            margin-bottom: 4rpx;
            padding-top: 18rpx;
          }

          .frontName {
            color: #AEAEAE;
            font-size: 24rpx;
            line-height: 40rpx;
            margin-bottom: 4rpx;
          }

          .price {
            color: #1A1A1A;
            line-height: 44rpx;
            font-size: 24rpx;
          }

          .share-icon {
            position: absolute;
            right: 18rpx;
            width: 60rpx;
            height: 60rpx;
            display: flex;
            align-items: center;

            .share-button {
              position: absolute;
              top: 0;
              bottom: 0;
              width: 100%;
              opacity: 0
            }

            &.share {
              bottom: 40rpx
            }

            &.add {
              top: 38rpx;
            }

            .share {
              width: 28rpx;
              height: 28rpx;
            }

            .love {
              width: 28rpx;
              height: 25rpx;
            }
          }
        }
      }

      .space {
        height: 1px;
        background: #F7F5F4;
        position: absolute;
        bottom: 0;
        width: calc(100% - 30rpx);
        left: 15rpx;

      }
    }
  }
</style>
